<template>
  <div class="dplayer"></div>
</template>

<script>
//import DPlayer from '../../static/js/DPlayer.min'
import DPlayer from 'DPlayer'
require('../../static/css/DPlayer.min.css')
import flv from 'flv.js'
export default {
  props: {
    autoplay: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: '#FADFA3'
    },
    loop: {
      type: Boolean,
      default: true
    },
    lang: {
      type: String,
      default: 'zh'
    },
    screenshot: {
      type: Boolean,
      default: false
    },
    hotkey: {
      type: Boolean,
      default: true
    },
    preload: {
      type: String,
      default: 'auto'
    },
    contextmenu: {
      type: Array
    },
    subtitle: {
      type: Object
    },
    danmaku: {
      type: Boolean
    },
    apiBackend: {
      type: Object
    },
    logo: {
      type: String
    },
    video: {
      type: Object,
      required: false
      /* validator (value) {
          return typeof value.url === 'string'
        } */
    }
  },
  data () {
    return {
      dp: null
    }
  },
  mounted () {
    const player = this.dp = new DPlayer({
      element: this.$el,
      autoplay: this.autoplay,
      theme: this.theme,
      loop: this.loop,
      lang: this.lang,
      screenshot: this.screenshot,
      hotkey: this.hotkey,
      preload: this.preload,
      contextmenu: this.contextmenu,
      logo: this.logo,
      video: {
        quality: this.video.quality,
        defaultQuality: 0,
        pic: this.video.pic,
        thumbnails: this.video.thumbnails,
        customType: this.video.customType
      },
      danmaku: this.danmaku,
      apiBackend: this.apiBackend,
      live: this.video.live
    })
    player.on('play', () => {
      this.$emit('play')
    })
    player.on('pause', () => {
      this.$emit('pause')
    })
    player.on('canplay', () => {
      this.$emit('canplay')
    })
    player.on('playing', () => {
      this.$emit('playing')
    })

    player.on('progress', () => {
      this.$emit('progress')
    })
    player.on('ended', () => {
      this.$emit('ended')
    })
    player.on('error', () => {
      this.$emit('error')
    })
    player.on('waiting', () => {
      this.$emit('waiting')
    })

    player.on('timeupdate', () => {
      this.$emit('timeupdate')
    })

    player.on('seeking', () => {
      this.$emit('seeking')
    })
    player.on('seeked', () => {
      this.$emit('seeked')
    })

    player.on('ratechange', (msg) => {
      this.$emit('ratechange')
    })
    player.on('mozaudioavailable', (msg) => {
      this.$emit('mozaudioavailable')
    })

    player.on('loadeddata', (msg) => {
      this.$emit('loadeddata')
    })

    player.on('volumechange', (msg) => {
      this.$emit('volumechange')
    })

    player.on('stalled', (msg) => {
      this.$emit('stalled')
    })

    player.on('suspend', (msg) => {
      this.$emit('suspend')
    })
  }
}
</script>
<style>

</style>
